<!-- 行车管理-缴费管理 -->
<template>
  <div class="car-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码:</span>
      <el-input label="车牌号码" v-model="params.carNumber" clearable placeholder="请输入车牌号码" class="search-carNumber"
        @clear="searchCar" @change="searchCar" />
      <span class="search-label">缴纳状态：</span>
      <el-select v-model="params.paymentStatus" class="search-paymentStatus">
        <el-option label="全部" :value="null" />
        <el-option label="未缴纳" :value="0" />
        <el-option label="已缴纳" :value="1" />
      </el-select>
      <el-button type="primary" class="search-btn" icon="el-icon-search" @click="searchCar">查询</el-button>

      <el-tag class="tag-container" >本园区共计停车{{this.total}}辆，月卡用户{{ this.cardPayNum }}人，已缴纳用户{{this.payTotalNum }}人，共缴纳{{this.payTotal}}元</el-tag>
      <!-- <el-button type="primary" plain class="tag-container" @hover="jump('缴费记录')">本园区共计停车{{ this.total }}辆，月卡用户{{
        this.cardPayNum }}人，已缴纳用户{{ this.payTotalNum }}人，共缴纳{{ this.payTotal }}元</el-button> -->
    </div>

    <!-- 表格区域 -->
    <el-table style="width: 100%" :data="carPayList" stripe height="520" size="medium" fit>
      <el-table-column type="index" width="60" label="序号" />
      <el-table-column label="车牌号码" prop="carNumber" sortable />
      <el-table-column label="收费类型" prop="chargeType" sortable :formatter="getChargeType" />
      <el-table-column label="停车总时长" prop="parkingTime" sortable />
      <el-table-column label="缴纳费用(元)" prop="actualCharge" sortable />
      <el-table-column label="缴纳状态" prop="paymentStatus"  :formatter="getPaymentStatus" />
      <el-table-column label="缴纳情况" prop="paymentMethod"  :formatter="getPaymentMethodName" />
      <el-table-column label="缴纳时间" prop="paymentTime" sortable />
      <template slot="empty">
        <div style="text-align: center; padding: 20px;">
          <img src="@/assets/nodata.png" style="font-size: 40px; color: #c0c4cc;"/>
          <p style="color: #c0c4cc; margin-top: 10px;font-size: 20px;">暂无数据</p>
        </div>
      </template>
    </el-table>

    <!-- 分页区域 -->
    <div class="page-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
        :page-sizes="[10, 5, 2, 20, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>

import { getCarPayListAPI } from '@/api/car'
export default {

  data() {
    return {
      carPayList: [], // table列表
      total: 0,
      payTotal: 0,
      payTotalNum: 0,
      cardPayNum: 0,
      params: {  // 请求参数
        page: 1,
        pageSize: 10,
        carNumber: '',
        paymentStatus: null
      },

    }
  },
  mounted() {
    this.getCarPayList()

  },
  methods: {
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.getCarPayList()
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.getCarPayList()
    },
    async getCarPayList() {
      const res = await getCarPayListAPI(this.params)
      this.carPayList = res.data.rows
      let payTotal = 0
      let yjn = 0
      let yk = 0
      console.log(res.data.total)
      const res2 = await getCarPayListAPI({ page: 1, pageSize: res.data.total })
      for (let i = 0; i < res2.data.total; i++) {
        payTotal += res2.data.rows[i].actualCharge
        if (res2.data.rows[i].paymentStatus === 1) {
          yjn += 1
        }
        if (res2.data.rows[i].chargeType == 'card') {
          yk += 1
        }
        console.log(res2.data.rows[i].paymentMethod)
      }
      this.payTotalNum = yjn
      this.payTotal = payTotal
      this.cardPayNum = yk
      this.total = res.data.total

    },
    getChargeType(row) {
      return row.chargeType === 'card' ? '月卡' : '临时停车'
    },
    getPaymentStatus(row) {
      // if (row.paymentStatus==1 && row.actualCharge==0) return '未缴纳'
      // if  (row.actualCharge!=0 ) return '已缴纳'

      return row.paymentStatus === 0 ? '未缴纳' : '已缴纳';

    },
    getPaymentMethodName(row) {
      if (row.paymentMethod === 'Alipay') { return '支付宝' }
      if (row.paymentMethod === 'WeChat') { return '微信' }
      if (row.paymentMethod === 'Cash') { return '线下' }
      if (!row.paymentMethod) return '其他'
    },
    async searchCar() {
      this.params.page = 1
      const res = await getCarPayListAPI(this.params)
      this.carPayList = res.data.rows
      this.total = res.data.total
    },
  },
  refreshPage() {
    location.reload();
  }
}

</script>

<style lang="scss" scoped>
.tag-container {

  margin-left: 160px;

}

.search-btn {
  margin-left: 0px;
}

.page-container {
  margin-top: 8px;
  text-align: right;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;
}

.search-label {
  width: 80px;
}

.search-carNumber {
  width: 150px;
  margin-right: 10px;
}

.search-paymentStatus {
  width: 150px;
  margin-right: 10px;
}</style>